<template>
    <div class="container">
        <el-card>
          <h3 slot="header" style="font-size:16px">当前位置：首页>用户管理>订单管理><span style="color:#3399CC;">订单详情</span></h3>
          <section class="account-box">
          <div style="width:300px;height:120px; margin-bottom: 20px; border:1px solid #3399CC;">
           <span class="account-box__left" style="margin-bottom: 20px; display: block">
            <p>订单编号：{{orderId}}</p>
            <p>{{current_state}}</p>
            <p>取消订单</p>
           </span>
           </div>
           <div style="width:800px;height:120px; margin-bottom: 20px; border:1px solid #3399CC;">
            <span class="account-box__right" style=" margin-bottom: 20px; display: block">
            <br>
            <br>
            <el-steps :active="active" finish-status="success"  align-center>
              <el-step title="提交订单"></el-step>
              <el-step title="付款成功"></el-step>
              <el-step title="商品出库"></el-step>
              <el-step title="等待收货"></el-step>
              <el-step title="完成"></el-step>
            </el-steps>
           </span>
           </div>
          </section>
        </el-card>
        <el-card>
          <section class="account-box">
          <div style="width:300px;height:180px; margin-bottom: 20px; border:1px solid #3399CC;">
           <span class="account-box__left" style="margin-bottom: 20px; display: block">
            <p>送货方式：{{delivery_mode}}</p>
            <p>承运人：{{delivery_person}}</p>
            <p>货运单号：{{delivery_num}}</p>
           </span>
           </div>
           <div style="width:800px;height:180px; margin-bottom: 20px; border:1px solid #3399CC;">
            <span class="account-box__right" style=" margin-bottom: 20px; display: block">
            <p> &nbsp; </p>
            <productstate />
           </span>
           </div>
          </section>
        </el-card>
        <el-card>
          <section class="account-box">
          <div style="width:300px;height:180px; margin-bottom: 20px; border:1px solid #3399CC;">
           <span class="account-box__left" style="margin-bottom: 20px; display: block">
            <p>收货人信息</p>
            <p>收货人：{{reciver}}</p>
            <p>地址：{{reciver_address}}</p>
            <p>手机号码：{{phone_num}}</p>
           </span>
           </div>
           <div style="width:800px;height:180px; margin-bottom: 20px; border:1px solid #3399CC;">
            <span class="account-box__right" style=" margin-bottom: 20px; display: block">
            <p>收付信息</p>
            <p>付款方式：{{pay_method}}</p>
            <p>商品总额：{{pay_total}}</p>
            <p>应支付金额：{{pay_should}}</p>
            <p>运费金额：{{driv_total}}</p>
           </span>
           </div>
          </section>
        </el-card>
        <el-card>
          <el-table :data="product_list" stripe fit>
            <el-table-column prop="name" label="商品信息" align="center" />
            <!-- <el-table-column prop="type_info" label="订单明细" align="center" /> -->
            <el-table-column prop="productPrice" label="单价" align="center" />
            <el-table-column prop="productQuantity" label="数量" align="center" />
            <el-table-column prop="productPrice" label="小计" align="center" />
            <el-table-column prop="pay" label="实付" align="center">
            </el-table-column>
          </el-table>
          <div style="float:right; margin-right:50px;">
            <p>商品总额：{{pay_total}}</p>
            <p>运费金额：{{driv_total}}</p>
            <p style="color: red;">应支付金额：{{pay_should}}</p>
          </div>
        </el-card>
     </div>
</template>

<script>
  import { doInfo } from '@/apis/product';
  import productstate from '@/components/common/productstate';
  export default {
    name: 'OrderStatus',
    components: { productstate },
    data() {
      return {
        instance: null,
        current_state: '待付款',
        active: 0,
        orderId: '',
        delivery_mode: '普通快递',
        delivery_person: '顺丰快递',
        delivery_num: '5813485930466',
        reciver: '',
        reciver_address: '',
        phone_num: '',
        pay_method: '在线支付',
        pay_total: '',
        pay_should: '',
        driv_total: 0,
        product_list: []
      };
    },
    async mounted() {
      // console.log(this.$route.query);
      this.instance = this.$route.query.order;
      if ((this.instance === undefined) || (this.instance == null)) {
        return;
      }
      switch (this.instance.status) {
      case 0:
      case 1:
      case 2:
        this.active = this.instance.status;
        break;
      case 3:
      case 4:
      case 5:
      default:
        this.active = 4;
        break;
      }
      this.orderId = this.instance.id;
      this.current_state = this.instance.status_str;
      this.reciver = this.instance.receiverName;
      this.reciver_address = this.instance.receiverDetailAddress;
      this.phone_num = this.instance.receiverPhone;
      this.product_list = this.instance.product_list;
      this.pay_total = this.instance.originalPrice;
      this.pay_should = this.instance.originalPrice;
      for (const value of this.product_list) {
        if (this.instance.status === 0) {
          value['pay'] = 0;
        } else {
          value['pay'] = value.productPrice;
        }
        const res = await doInfo({ productId: value.productId });
        // console.log(res);
        if ((res !== undefined) || (res != null)) {
          this.$set(value, 'name', res.data.name);
        }
      }
    }
  };
</script>

<style lang="scss" type="text/scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  .avtar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .el-card {
    margin-bottom: 20px;
    .account-box {
      @include h-btw();
      &__left {
        @include v-center();
      }
      &__right {
        @include v-center();
        span {
          display: block;
          font-size: 12px;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          background-color: $c1;
          color: white;
          border-radius: 50%;
          margin: 10px 10px 10px 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
